<!DOCTYPE html>
<html lang="zh-CN">
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet">
	<link href="/confirm/jquery-confirm.css" rel="stylesheet">
	<style type="text/css">
		body{
			padding:0px;
			margin:0px;
		}
		.wrapper{
			display: flex;
			width:100%;
		}
		.menu{
			width:200px;
			background:#4747d8;
		}
		.menu ul{
			padding:0;
			margin:0;
		}
		.menu ul li{
			list-style: none;
			padding:10px 20px;
			color:#ffffff;
			font-weight: bold;
			cursor: pointer;
		}
		.menu ul li a{
			display:inline-block;
			width:100%;
			height:100%;
			text-decoration: none;
			color:#ffffff;
		}
		.content{
			flex: 1;
			padding:10px;
		}
		.content input[class=form-control]{
			width:20%;
			display:inline-block;
		}
		.content .search{
			border:1px #e8e8e8 solid;
			padding: 10px;
			box-shaow:2px 2px 5px #e8e8e8;
		}
		.section{
			display:inline-block;
		}
		.section select{
			display:inline-block;
			width:30%;
			line-height:30px;
			border-radius:4px;
		}
		@-webkit-keyframes rotation {  
                from {  
                    -webkit-transform: rotate(0deg);  
                }  
                to {  
                    -webkit-transform: rotate(360deg);  
                }  
            }
            .Rotation {  
                position: absolute;  
                left: 30px;  
                top: 15px;  
                width: 70px;  
                height: 70px;  
                color: #F00;  
                -webkit-transform: rotate(360deg);  
                animation: rotation 1s linear infinite;  
                -moz-animation: rotation 1s linear infinite;  
                -webkit-animation: rotation 1s linear infinite;  
                -o-animation: rotation 1s linear infinite;  
            }
            .img {  
                border-radius: 70px;  
            }  
            /**opacity 透明度**/  
            .div-a {  
                position: absolute;  
                top: 0;  
                bottom: 0;;  
                width: 100%;  
                height: 100%;  
                filter: alpha(Opacity=10);  
                -moz-opacity: 0.1;  
                opacity: 0.1;  
                background: #CCCCCC;  
            }  
            .img-div{  
                position: relative;  
                top: 40%;  
                margin: 0 auto;  
                width: 300px;  
                height: 100px;  
                background: #FFFFFF;  
                text-align: center;  
                border: 1px #E8E8E8 solid;  
            }  
            .loading{  
                display: inline-block;  
                font-size: 28px;  
                margin-left:40px ;  
                line-height: 28px;  
                margin-top: 36px;  
            }  
	</style>
</head>
<body>
	<div class="container-fluid">
		<div class="row" style="height:10vh;background:#7474ec">
			<div class="col-md-12">
			</div>
		</div>
		<div class="row" style="height:90vh">
			<div class="wrapper" style="height:90vh">
				<div class="menu">
					<ul>
						<li th:each="menu : ${session.menus}">
							<a th:href="${menu.menuUrl}"><span th:text="${menu.menuName}"></span></a>
						</li>
					</ul>
				</div>
				<div class="content" style="position: relative; ">
					<div>
						<button class="btn btn-default" onclick="addType()">新增</button>
					</div>
					<div id="list"></div>
					<div id="loading" class="div-a" style="display:none">  
				         <div class="img-div">  
				             <img class="Rotation img" width="500" height="500" /><span class="loading">加载中...</span>  
				         </div>  
				     </div>
				</div>
			</div>
		</div>
	</div>
	
	  
</body>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="/confirm/jquery-confirm.js"></script>
<script type="text/javascript" src="/confirm/jquery.sticky.min.js"></script>
<script type="text/javascript">
function postType(){
	$('#loading').show();
	$.ajax({
		url:'/postType/list',
		type:'post',
		success: function(html){
			$('#list').html(html);
			$('#loading').hide();
		}
	})
}
function addType(){
	$('#typeModal').modal();
}
function saveType(){
	var data = {
		pid: $('#pid').val(),
		typeCode: $('#typeCode').val(),
		typeName: $('#typeName').val()
	}
	$.ajax({
		url:'/postType/save',
		type:'post',
		data: data,
		success: function(res){
			if(res === 'success'){
				postType();
			} else {
				alert('保存失败');
			}
		}
	})
}
function delPost(id){
	$.confirm({
		title: '删除类型',
	    content: '确认删除吗？',
	    confirmButton: '确定',
	    cancelButton: '取消',
	    confirm: function(){
	    	$.ajax({
	     		url:'/postType/delete',
	     		type:'post',
	     		data: {
	     			id: id
	     		},
	     		success: function(res){
	     			if(res === 'success'){
	     				postType();
	     			} else {
	     				alert('删除失败');
	     			}
	     		}
	     	}) 
	    },
	    cancel: function(){
	    }
	});
}
$(function(){
	postType();
})
</script>
